var Unit = Backbone.Model.extend({
	defaults: {
		name:				null,
		active:			false
	},

	initialize: function(){
		this.bind('change:active', function() {
			this.trigger('active');
		});

		return this;
	}
});

var UnitCollection = Backbone.Collection.extend({
	model: Unit,

	initialize: function() {
		console.log('hello UnitCollection');

		this.on('add', function(unit) {
			unit.bind('active', this.active);
		});
	},

	active: function() {
		alert('yup');
	}
});

var UnitView = Backbone.View.extend({
	template:		_.template($("#view-unit").html()),

	events	: {
		'click':		'setActive'
	},

	initialize: function(){
		_.bindAll(this, 'render', 'setActive');

		this.model.bind('active', this.setActive);
	},

	render: function() {
    $('#page-inner').append(this.template(this.model.toJSON()));
		this.setElement($('#unit-1'));

		return this;
	},

	setActive: function() {
		$(this.el).addClass('active');
		this.model.set('active', true);
		return this;
	},

	unsetActive: function() {
		$(this.el).removeClass('active');
		return this;
	}
});

var UnitCtrlView = Backbone.View.extend({
	el:					$('form-unit-ctrl'),
	template:		_.template($("#view-unit-ctrl").html()),

	initialize: function(){
		_.bindAll(this, 'render');
	},

	render: function() {
    $('#sidebar-right').append(this.template());
		return this;
	}
});

// ---------------------------------------------------------------------------------------
// Initialisierung Unit Collection und Model
unitCollection = new UnitCollection();

h01 = new Unit({
	id:		1,
	name: 'John Doe'
});
unitCollection.add(h01);

// Initialisierung Unit View
h01View = new UnitView({
	model: h01
});
h01View.render();

// Initialisierung Unit View Ctrl
unitCtrlView = new UnitCtrlView();
unitCtrlView.render();